<template>
  <div>
    <template v-if="url">
      <div style="display: flex;  flex-wrap: wrap;">
        <template>
          <i class="el-icon-circle-close" @click="delimg()"></i>
          <div class="picA" v-if="url">
            <img class="img" :src="getimg + url">
          </div>
        </template>
      </div>
    </template>

      <el-upload ref="upload" v-if="!url" :action="upfile_url" :on-success="upimg_back_fun" :headers="upfile_head" :limit="1"
        multiple :show-file-list="false" name="img" list-type="picture-card" class="imgs">
        <i class="el-icon-plus"></i>
      </el-upload>


  </div>
</template>

<script>
  import {
    Api_url
  } from '../api/config.js'
  export default {
    props: {
      url: '',
      index: '',
    },
    data() {
      return {
        drawer: false,
        urls: '',
        upfile_head: {
          token: localStorage.getItem('token')
        },
        getimg: this.$get_img,
        upfile_url: Api_url + "cms/common/uploads_image"
      }
    },
    mounted() {

    },
    methods: {
      delimg() {
        this.$emit("delImg", this.index)
      },
      back() {
        this.drawer = false
      },
      send_father(e) {
        let data = {
          index: this.index,
          data: e
        }
        this.drawer = false
        this.$emit("get_data", data)
      },
      upimg_back_fun(e) {
        let data = {
          index: this.index,
          url: e.data.url,

        }
        this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
        this.$emit("get_url", data)
      }
    }
  }
</script>

<style>
  .form {
    width: 400px;
  }

  .select {
    width: 100%;
  }

  .picA {
    width: 148px;
    height: 148px;
    background-color: #FBFDFF;
    border: 1px dashed #C0CCDA;
    border-radius: 6px;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    margin: 6px;
  }

  .img {
    width: 144px;
    height: 144px;
    border: 1px solid #BFBFBF;
    border-radius: 3px;
  }

  .banner {
    width: 1000px;
  }

  .banner_img {
    display: flex;
    flex-wrap: wrap;
  }

  .sku_input {
    width: 150px;
  }

  .sku_data {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    width: 1000rpx;
  }

  .quill-editor {
    width: 1000px;
    height: 250px;
  }

  .sub {
    margin-top: 100px;
  }
  .imgs{
    margin-top: 21px;
  }
</style>
